vue-tables-2 (1)

表格套件，本篇主要介紹使用Client及Server table的基礎

Github

matfish2/vue-tables-2

範例

註冊元件

註冊的方式：

import {ServerTable, ClientTable, Event} from 'vue-tables-2';
Vue.use(ClientTable); //Client table
Vue.use(ServerTable); //Server table

或直接引用JS檔，

<script src="https://cdn.jsdelivr.net/npm/vue-tables-2@1.4.70/dist/vue-tables-2.min.js"></script>

<script>
Vue.use(VueTables.ClientTable); //Client table
Vue.use(VueTables.ServerTable); //Server table
</script>

可額外指定參數：

Vue.use(ClientTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [template = 'default']);

例如：

Vue.use(ClientTable, {}, false, 'bootstrap3', 'default');

Client table

建立表格資料

HTML

<v-client-table ref="myTable" :data="tableData" :columns="columns" :options="options"></v-client-table>

JS

const FOO_DATA = [
    {id: 1, name:'Luke Skywalker',gender:'male', img:'https://goo.gl/KEUxHN'},
    ...
];

export default {
  name: "app",
  data() {
    return {
      columns: ["id", "name", "gender"],
      tableData: [],
      options: {}
    };
  },
  created() {
    this.tableData = FOO_DATA;
  }
};

Demo

若要取得目前已篩選的表格資料，可使用ref屬性以取得

1. allFilteredData: 所有已篩選資料
2. filteredData: 目前分頁上的已篩選資料

<v-client-table ref="myTable" :data="tableData" :columns="columns" :options="options"></v-client-table>

//Get the filtered table data on current page
let showFilteredCurrentPageData =
      this.$refs.myTable.filteredData;

//Get the filtered table data on all pages
let showFilteredData = 
      this.$refs.myTable.allFilteredData;

Server table

若資料需ajax後端的資料，則可改使用Server table。
支援以下三種ajax框架：

• jquery
• vue-resource
• axios

<v-server-table url="http://localhost:3000/starwars" :columns="columns" :options="options"></v-server-table>

其中url指定了要取得資料的網址，其回傳的JSON必須包含data(Table data，格式為Array)及count(總筆數，格式為Number)。
例如：

"data":[
    {"id": 1,"name":"Luke Skywalker","gender":"male", "img":"https://goo.gl/KEUxHN"},
    //...skip the other 8 records
    {"id": 10,"name":"Darth Sidious","gender":"male","img":"https://goo.gl/QJiJWx"},
],
"count":100

當定義了url時，vue-tables-2將自動送出如下之request url:

http://localhost:3000/starwars?query=&limit=10&ascending=1&page=1&byColumn=0&orderBy=name

另若不使用上述三種ajax的框架或需客製送出request的方法，可透過設定options中的requestFunction方法。

<v-server-table :columns="columns" :options="options"></v-server-table>

options: {
    requestFunction: function (params) {
        return axios.get("http://localhost:3000/starwars", {
            params: params
        });
    }
}

Demo